﻿@model  Authentication.Model.ViewModel.Warranty.SaleOutVerifyViewModel
<ul class="breadcrumb">
    <li>
        <i class="icon-home"></i>
        <a href="/">Customer</a>
        <i class="icon-angle-right"></i>
    </li>
    <li>
        <i class="icon-link"></i>
        <a href="#">Sellout Verify</a>
    </li>
</ul>
<!--/span-->
<div class="row-fluid">
    <div class="box span12 orange">
        <div class="box-header" data-original-title>
            <h2><i class="halflings-icon search white"></i><span class="break"></span>Search infomation</h2>
        </div>
        <div class="box-content">
            <div class="row-fluid">
                <div class="span2">
                    <div class="desc">
                        <div class="title">Region</div>
                        <div>
                            @Html.DropDownListFor(m => m.RegionIdentifier, new SelectList(Authentication.Web.Controller.Helper.Regions, "RegionIdentifier", "RegionName"), new { @class = "span12 region-val" })
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <div class="desc">
                        <div class="title">Bill to</div>
                        <div>
                            @Html.TextBoxFor(m => m.BillToCode, new { @class = "billto-val span5" })
                            @Html.TextBoxFor(m => m.BillToName, new { @class = "billto-text span7", disabled = "disabled" })
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <div class="desc">
                        <div class="title">Period</div>
                        <div>
                            @Html.TextBoxFor(m => m.FromDate, new { @class = "span6 datepicker datemask" })
                            @Html.TextBoxFor(m => m.ToDate, new { @class = "span6 datepicker datemask" })
                        </div>
                    </div>
                </div>
                <div class="span2">
                    <div class="desc">
                        <div class="title">Confirmation</div>
                        <div>
                            @Html.DropDownListFor(m => m.ConfirmFlag, Authentication.Web.Controller.Helper.Flags, "Select", new { @class = "span12" })

                        </div>
                    </div>
                </div>
                <div class="span2">
                    <div class="desc">
                        <div class="title">Verification</div>
                        <div>
                            @Html.DropDownListFor(m => m.VerifyFlag, Authentication.Web.Controller.Helper.Flags, "Select", new { @class = "span12" })
                        </div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                @Html.HiddenFor(x => x.Otp)
                @Html.HiddenFor(x => x.OtpCounter)
                <button id="btnSearch" type="submit" class="btn btn-success btn-responsive"><i class="icon-search"></i>&nbsp;Search</button>
                <button id="btnImport" type="submit" class="btn btn-success btn-responsive" disabled="disabled"><i class="icon-download-alt"></i>&nbsp;Export data</button>
            </div>
        </div>
    </div>
</div>
<!--/row-->
<div class="row-fluid">
    <div class="box span12">
        <div class="box-header" data-original-title>
            <h2><i class="halflings-icon th-large"></i><span class="break"></span>Sellout Verify</h2>
            <div class="box-icon">
                <a href="#" class="btn-minimize"><i class="halflings-icon chevron-up"></i></a>
            </div>
        </div>
        <div class="box-content">
            <table class="table table-striped bootstrap-datatable datatable" id="dataTables-1">
                <thead>
                    <tr>
                        <th class="text-left">Model</th>
                        <th class="text-left all">SeriaNumber</th>
                        <th class="text-left all">ShopCode</th>
                        <th class="text-left">ShopName</th>
                        <th class="text-left none">Region</th>
                        <th class="text-left none">Channel</th>
                        <th class="text-left none">Shop Type</th>
                        <th class="text-left">BillTo Code</th>
                        <th class="text-left">BillTo Name</th>
                        <th class="text-left">Owner Name</th>
                        <th class="text-left">Owner Email</th>
                        <th class="text-left none">Province Code</th>
                        <th class="text-left none">Province Name</th>
                        <th class="text-left none">District Code</th>
                        <th class="text-left none">District Name</th>
                        <th class="text-left none">Address</th>
                        <th class="text-left">CellNo#1</th>
                        <th class="text-left">CellNo#2</th>
                        <th class="text-left">EDI Number</th>
                        <th class="text-left">Suffix</th>
                        <th class="text-left">SaleIn Date</th>
                        <th class="text-left">SaleOut Date</th>
                        <th class="text-left">End-user cell</th>
                        <th class="text-center never">Verify</th>
                        <th class="text-left">User Verify</th>
                        <th class="text-center all">Verrfy/<br />
                            Confirm
                        </th>
                        <th class="text-left">Confirm User</th>
                        <th class="text-left">Confirm Comment</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
<!--/row-->
@section scripts
{
    <script>
        $(document).ready(function () {
            RefreshTable("#dataTables-1");
        });

        function confirmSaleOut(shopcode, shopcell, edino, serialno, model, suffix, selloutdate, sellindate, usercell, userconfirm) {
            var confirmText = '<strong>Shop code:</strong>' + shopcode + ', <strong>Shop cell#:</strong>' + shopcell + '<br/>'
                            + '<strong>Serial number:</strong>' + serialno + '<br/>'
                            + '<strong>Model:</strong>' + model + '<br/>'
                            + '<strong>Confirm comment</strong><br/>'
                            + '<textarea id="cfmCommen" rows="3" class="span8"></textarea>';

            ConfirmDlg('confirm this data...!', confirmText, successFunction = function () {
                var counter = $('#OtpCounter').val();
                var otp = $('#Otp').val();
                var commen = $('#cfmCommen').val();
                var modalData = { ShopCode: shopcode, ShopCell: shopcell, EDINumber: edino, SerialNumber: serialno, Model: model, Suffix: suffix, SelloutDate: selloutdate, SellinDate: sellindate, UserCell: usercell, UserConfirm: userconfirm, ConfirmComment: commen, OtpCounter: counter, Otp: otp };
                $.post('@Authentication.Configuration.SystemConfiguration.ConfirmSaleoutAction/', modalData, function (data) {
                    if (data.IsSuccess) reload();
                    else alert(data.ErrorMessage);
                });
            });
        }

        function buildAjaxSourcUrl() {
            var orgURL = '?counter=@Model.OtpCounter&otp=@Model.Otp';
            var regId = $('#RegionIdentifier').val();
            var billcode = $('#BillToCode').val();
            var fromdate = $('#FromDate').val();
            var todate = $('#ToDate').val();
            var confirmflag = $('#ConfirmFlag').val();
            var verifyflag = $('#VerifyFlag').val();

            if (regId != null && regId.trim().length > 0) {
                orgURL += ('&region=' + regId.trim());
            }
            if (billcode != null && billcode.trim().length > 0) {
                orgURL += ('&billto=' + billcode.trim());
            }
            if (fromdate != null && fromdate.trim().length > 0) {
                fromdate += ('&fromdate=' + fromdate.trim());
            }
            if (todate != null && todate.trim().length > 0) {
                orgURL += ('&billto=' + todate.trim());
            }
            if (confirmflag != null && confirmflag.trim().length > 0) {
                orgURL += ('&confirmflag=' + confirmflag.trim());
            }
            if (verifyflag != null && verifyflag.trim().length > 0) {
                orgURL += ('&verifyflag=' + verifyflag.trim());
            }
            if (orgURL.length > 1) {
                orgURL = '@Url.Action("SaleOutVerifyData")' + orgURL;
            } else {
                orgURL = '@Url.Action("SaleOutVerifyData")';
            }
            return orgURL;
        }

        function RefreshTable(tableId) {
            var urlData = buildAjaxSourcUrl();
            table = $(tableId).dataTable();
            table._fnClearTable(table.oSettings);
            table.fnDestroy();
            table.fnDraw(true);
            var table2 = $(tableId).dataTable({
                "bServerSide": true,
                "bProcessing": true,
                "responsive": true,
                "bAutoWidth": false,
                oLanguage: {
                    sProcessing: "<img src='http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif'/>"
                },
                "aLengthMenu": [10, 30, 50, 100],
                "pageLength": 30,
                "sAjaxSource": urlData,
                "fnServerParams": function (aoData) {
                    aoData.push({ "name": "myval", "value": $('#myselect :selected').val() });
                },
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'dataTables_wrapper'ip>>",
                "sPaginationType": "bootstrap",//"full_numbers",
                "aoColumns": [
                            { "sName": "Model", "bSortable": false },//0
                            { "sName": "SeriaNumber", "bSortable": false },//1
                            { "sName": "ShopCode", "bSortable": false },//2
                            { "sName": "ShopName", "bSortable": false },//3
                            { "sName": "RegId", "bSortable": false },//4
                            { "sName": "Channel", "bSortable": false },//5
                            { "sName": "ShopType", "bSortable": false },//6
                            { "sName": "BillToCode", "bSortable": false },//7
                            { "sName": "BillToName", "bSortable": false },//8
                            { "sName": "OwnerName", "bSortable": false },//9
                            { "sName": "OwnerEmail", "bSortable": false },//10
                            { "sName": "ProvinceCode", "bSortable": false },//11
                            { "sName": "ProvinceName", "bSortable": false },//12
                            { "sName": "DistCode", "bSortable": false },//13
                            { "sName": "DistName", "bSortable": false },//14
                            { "sName": "Address", "bSortable": false },//15
                            { "sName": "CellNo1", "bSortable": false },//16
                            { "sName": "CellNo2", "bSortable": false },//17
                            { "sName": "EdiNumber", "bSortable": false },//18
                            { "sName": "Suffix", "bSortable": false },//19
                            { "sName": "SaleInDate", "bSortable": false },//20
                            { "sName": "SaleOutDate", "bSortable": false },//21
                            { "sName": "UserCell", "bSortable": false },//22
                            { "sName": "VerifyFlag", "bSortable": false },//23
                            { "sName": "UserVerify", "bSortable": false },//24
                            { "sName": "ConfirmFlag", "bSortable": false },//25
                            { "sName": "ConfirmUser", "bSortable": false },//26
                            { "sName": "ConfirmComment", "bSortable": false }],
                "aoColumnDefs": [{
                    "aTargets": [25],
                    "mData": null,
                    "mRender": function (data, type, full) {
                        var iconClassV = "ok", btnClassV = "btn-primary", iconClassC = "ok", btnClassC = "btn-primary";
                        var btnConfirm = '<button class=\"btn btn-small ' + btnClassV + '\" disabled=\"disabled\"><i class=\"halflings-icon white ' + iconClassV + '\"></i></button>';
                        var btnVerify = '<button class=\"btn btn-small ' + btnClassC + '\" disabled=\"disabled\"><i class=\"halflings-icon white ' + iconClassC + '\"></i></button>';
                        var confirmDialog = 'confirmSaleOut(\'' + full[2] + '\', \'' + full[16] + '\', \'' + full[18] + '\', \'' + full[1] + '\', \'' + full[0] + '\', \'' + full[19] + '\', \'' + full[21] + '\', \'' + full[20] + '\', \'' + full[22] + '\', \'' + full[26] + '\')';
                        if (!full[23]) {
                            iconClassV = "ban-circle";
                            btnClassV = "btn-danger";
                            btnVerify = '<button class=\"btn btn-small ' + btnClassV + '\" onclick=\"ConfirmDlg(\'' + full[0] + '\',\'' + full[16] + '\', callback);\" disabled=\"disabled\"><i class=\"halflings-icon white ' + iconClassV + '\"></i></button>';
                        }
                        if (!full[25]) {
                            iconClassC = "ban-circle";
                            btnClassC = "btn-danger";
                            btnConfirm = '<button class=\"btn btn-small ' + btnClassC + '\" onclick=\"' + confirmDialog + '\"><i class=\"halflings-icon white ' + iconClassC + '\"></i></button>';
                        }
                        return '<div style="width: 78px;">' + btnVerify + ' ' + btnConfirm + '</div>';
                    }
                }]
            });
        }

        $("#btnSearch").click(function () {
            RefreshTable("#dataTables-1");
        });
    </script>
}